<template>
    <div class="content_base">
      <template>
                  <!-- 查询等功能的部分 -->
          <div class="fun">
              <el-form  :model="seleform" label-width="120px" ref="form">
                <el-form-item label="所在设区市：">
                    <!-- <span class="span1">（含省直管县）</span> -->
                   <el-select v-model="seleform.city" filterable placeholder="选择所在设区市" @change="disCity(tableData1,seleform),getData(seleform),seleform.county=seleform.dikeName=seleform.inRivers=''" clearable>
                     <el-option v-for="(item,index) in cityArr" :key="index" :label="item" :value="item"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="所在县：">
                     <!-- <span class="span2">（市，区）</span> -->
                   <el-select size="large" v-model="seleform.county" filterable placeholder="选择所在县" @change="disCity(tableData1,seleform),getData(seleform),seleform.dikeName=seleform.inRivers=''" clearable>
                      <el-option v-for="(item,index) in countyArr" :key="index" :label="item" :value="item"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="圩堤名称：" >
                   <el-select size="large" v-model="seleform.dikeName" filterable placeholder="选择圩堤名称" @change="disCity(tableData1,seleform),getData(seleform),seleform.inRivers=''" clearable>
                     <el-option v-for="(item,index) in dikeNameArr" :key="index" :label="item" :value="item"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="所在河流："  v-if="0">
                   <el-input size="mini" v-model="seleform.inRivers" placeholder="填写所在河流" @change="disCity(tableData1,seleform),getData(seleform)" clearable>
                   </el-input>.....
                 </el-form-item>
                 <el-button type="primary" icon="el-icon-search" class="btn1" size="medium" @click="getData(seleform)">查询</el-button>
                 <el-button v-if="leval=='3'" type="primary" icon='el-icon-plus' size="medium" class="btn2" @click="addNewItem('add')">新增</el-button>
              </el-form>
          </div>
                    <!-- 表格部分 -->
         <div class="table test" style="padding:20px;">
             <el-table
                  class="test"
                  :data="tableData"
                  stripe
                  style="width: 100%"
                > 
                   <!-- style="width: 100%"    -->
                <el-table-column
                  label="序号"
                  width="60"
                  prop="orderNumber"
                >
                </el-table-column>
                <el-table-column
                  prop="dikeName"
                  label="圩堤名称"
                >
                 <template slot-scope="scope">
                       <el-button
                         type="text"
                         @click="toDetial(scope.row)">{{scope.row.dikeName}}</el-button>
                     </template>
                </el-table-column>   
                <el-table-column
                  prop="city"
                  label="所在设区市（含省直管县）"
                  >
                </el-table-column>
                <el-table-column
                  prop="county"
                  label="所在县（市,区）"
                  >
                </el-table-column>
                <el-table-column
                  prop="inRivers"
                  label="所在河流"
                  >
                </el-table-column>
                <el-table-column
                  prop="protectArea"
                  label="保护面积（万亩）"
                  >
                </el-table-column>
                <!-- <el-table-column
                  prop="protectCultivateArea"
                  label="保护耕地面积（万亩）"
                  >
                </el-table-column>
                <el-table-column
                  prop="protectPeople"
                  label="保护（受益）人口（万人）"
                  >
                </el-table-column> -->
                <el-table-column
                  prop="dikeLength"
                  label="堤线长度(km)"
                  >
                </el-table-column>
                <el-table-column
                  prop="governDiskLength"
                  label="需治理的长度(km)"
                  >
                </el-table-column>
                <el-table-column
                  prop="note"
                  label="备注">
                </el-table-column>
                <el-table-column width="250" label="操作" v-if="leval!=2">
                  <template slot-scope="scope">
                    <el-button
                      size="medium"
                      @click="ToEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button
                      v-if="leval==3"
                      size="medium"
                      type="danger"
                      @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                  </template>
                </el-table-column>
             </el-table>
          </div>
      </template>

                    <!-- 分页 -->
      <div class="page" v-if="isVpage">
        <el-pagination
          class="posipage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="seleform.currentPage"
          :page-sizes="[20, 40, 60]"
          :page-size="seleform.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="itemtotal">
        </el-pagination>
      </div>
      <el-footer class="footer">Copyright&copy;2018江西省水利科学研究院|江西鄱水信息科技有限公司</el-footer>
    </div> 
</template>
<script>
export default {
    data(){
    return{
        tableData:[],
        tableData1:[],
        //存储可以操作的信息
        tableData2:[],
        //选择筛选的条件
        seleform:{
            city:'',
            county:'',
            dikeName:'',
            inRivers:'',
            currentPage:1,
            pageSize:20
        },
        //总条数
        itemtotal:10,
        //功能区的联级选择
          cityArr:[],
          countyArr:[],
          dikeNameArr:[],
          inRiversArr :[],
        //用户信息
        leval:'',
        unitMessage:'',
        //操作，分页是否显示
        isVpage:true,
        isVdel:false,
    }
  },
  methods:{
       //删除条目的方法
       handleDelete(index,row){
         var _this = this;
         this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               var thisDate = (new Date()).getTime()
              _this.$axios.get(`/dikeInfo/deletedikeinfo/${row.dikeCode}`,{params:{
                thisDate:thisDate}
              }).then(function(){
                _this.getData(_this.seleform)
                _this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
              }).catch(function(err){
                console.log(err)
              })
              
            }).catch((err) => {
              console.log(err)
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
         },
       //编辑条目的方法------初始化及上传
       ToEdit(index,row){
          // this.editForm = row;
          // console.log(this.editForm)
          var dikeCode = row.dikeCode
          if(this.leval!=3){
            this.$router.push({name:'baseEdit',params:{
              'dikeCode':dikeCode
            }})
          }else{
            this.$router.push({name:'baseAdd',params:{
             'addNew':'edit',
             'dikeCode':dikeCode
        }})
          }
          
       },
       //增加数据的方法
       //增加的初始化
       addNewItem(addNew){
        this.$router.push({name:'baseAdd',params:{
             'addNew':addNew,
             'dikeCode':null
        }})
       },
       toDetial(row){
         var dikeCode = row.dikeCode
          this.$router.push({name:'baseDetial',params:{
            'dikeCode':dikeCode
          }})
       },
       
       //数组去重
       disChon(arr){
           var newArr =[]; 
          for(var i=0;i<arr.length;i++){
              var def = true
            for(var j=i+1;j<arr.length;j++){
              if(arr[i] ==arr[j]){
                  def = false;
                 }
            }if(def){
              newArr.push(arr[i] )
            }
         } 
         return newArr;
       },
       //分级选择-----连级
       disCity(tableData,seleform){
          var cityArr = [];
          var countyArr = [];
          var dikeNameArr =[];
          var inRiversArr =[];
          //选择市级
          for(var i=0;i<tableData.length;i++){
                cityArr.push(tableData[i].city)
          }
          this.cityArr =this.disChon(cityArr);
          //选择城市确定县级
         if(seleform.city){
             for(var i=0;i<tableData.length;i++){
               if(tableData[i].city==seleform.city){
                 countyArr.push(tableData[i].county)
               }
             }
         }else{
           for(var i=0;i<tableData.length;i++){
             countyArr.push(tableData[i].county);
           }
         }
         this.countyArr = this.disChon(countyArr)
         //确定名称
         if(seleform.county && seleform.city){

           for(var i=0;i<tableData.length;i++){
                if(tableData[i].city==seleform.city && tableData[i].county.indexOf(seleform.county!=-1)){
                  dikeNameArr.push(tableData[i].dikeName)
                }
           }
           }else if(seleform.county||seleform.city){
                var forDikeName = seleform.county||seleform.city;
                for(var i=0;i<tableData.length;i++){
                  if(tableData[i].county==forDikeName||tableData[i].city==forDikeName){
                     dikeNameArr.push(tableData[i].dikeName)
                  }
                } 
            }else{
              for(var i=0;i<tableData.length;i++){
                   dikeNameArr.push(tableData[i].dikeName)
              }
        }
            this.dikeNameArr=this.disChon(dikeNameArr)

     
       }, 
       //接收数据
       getData(seleform){
         //将分页显示，将操作栏隐藏
           var _this=this;
           this.$axios.post('/dikeInfo/getdikeinfo',seleform).then(function(res){
             var data = res.data.responseCode
               _this.tableData = res.data.responseData.dataList
               //存储所有的河流信息
               _this.itemtotal = res.data.responseData.page.totalSize;
               _this.isVdel = false 
             }).catch(function(err){
              console.log(err)
           })   
      },
      //获得当前用户可操作的信息---------------可提取出去---将分页隐藏，将操作栏显示
      del(){
        // this.$axios.get('/dikeInfo/getcurrentdikeinfo').then(function(res){
        //   console.log(res)
        // })
        if(this.leval!='3'){
          for(var i=0;i<this.tableData1.length;i++){
              if(this.tableData1[i].city==this.unitMessage||this.tableData1[i].county==this.unitMessage){
                  this.tableData2.push(this.tableData1[i])
              }
          }
          this.tableData = this.tableData2 
          this.isVpage=false 
        }
        this.isVdel=true
          
         
          
      },
      //页面跳转
      handleSizeChange(val) {
        this.seleform.pageSize = val;
        this.getData(this.seleform)
      },
      handleCurrentChange(val) {
        this.seleform.currentPage = val;
        this.getData(this.seleform);
      }
  },
  created(){  
         //获取数据并将初始化的所有数据存储起来
         var _this = this
         this.$axios.post('/dikeInfo/getdikeinfo',{
            city:'',
            county:'',
            dikeName:'',
            inRivers:'',
            currentPage:'',
            pageSize:''
         }).then(function(res){
           var data = res.data.responseCode
           if(data=='101'){
              _this.$router.push({name:'login'})
           }else{
             _this.tableData1 = res.data.responseData.dataList
              _this.disCity(_this.tableData1,_this.seleform)}
         }).catch(function(err){
           console.log(err)
         })

         this.$axios.post('/dikeInfo/getdikeinfo',_this.seleform).then(function(res){
            _this.tableData = res.data.responseData.dataList
            // _this.tableData1 = res.data.responseData.Data.dikeData
            //做分页的总条数
            _this.itemtotal = res.data.responseData.page.totalSize;
            // _this.disCity(_this.tableData1,_this.seleform)
          }).catch(function(err){
             console.log(err)
          })


          //获取用户等级
         var storage = window.localStorage;
         this.leval =storage.getItem('level')
         this.unitMessage = storage.getItem('unitMessage');
  }
}
</script>
<style>
 /* .content_base{
    margin-left:10px;
    background:#fff;
    height: auto;
    width: 100%;
    min-height: 100%;
    margin-top:10px;
  } */
.test .has-gutter{
  line-height:20px;
  text-align: center;
}
.table .el-table th{
    text-align: center
  }
</style>

<style scoped>

  .el-form{
      padding-left:10px 
  }  
  .fun{
    /* background: red!important; */
    height: 84px;
    position: relative;
    /* background-color:#f0ffff; */
  } 
  .fun .el-form[data-v-4c9b0d4d]{
    height: 84px;
  }
  .fun .el-form-item{
      /* width:19%!important; */
      width:250px!important;
      position: relative;
      float: left;
      margin-top:22px;
  }
  .el-form-item__content .el-select,.el-form-item__content .el-input{
    min-width: 100px;
  }
  .fun  .el-form-item span{
       position: absolute;
       top:20px;
       left:-105px;
       color: #606266;
   }
  .fun .el-form-item .span2{
     left:-80px;
   }
  .fun .btn1,.btn2{
    float: left;
    margin-top:22px
   }
  .fun .btn1{
     margin-left:20px
   }

   .fun .el-form-item__label{
     float:right;
   }
   
   
         /* 填写的弹框 */
  
  .page{
    height: 200px;
  }
 .posipage{
   padding-top:50px;
   padding-right:50px;
   float: right;
 }
 .dialog-footer{
   position: relative;
 }
 .notice{
   position: absolute;
   font-size:14px;
   color:red;
    left:20px;
    top:10px;
 }
 
</style>



